<template>
  <div class="grid-layout">
    <el-container>
      <el-aside width="240px">
        <div class="sidebar">
          <div class="logo">
            <h3>网格员系统</h3>
          </div>
          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical"
            router
          >
            <el-menu-item index="/grid/dashboard">
              <el-icon><Odometer /></el-icon>
              <span>工作台</span>
            </el-menu-item>
            <el-menu-item index="/grid/tasks">
              <el-icon><List /></el-icon>
              <span>指派任务</span>
            </el-menu-item>
            <el-menu-item index="/grid/confirm">
              <el-icon><Check /></el-icon>
              <span>确认数据</span>
            </el-menu-item>
            <el-menu-item index="/grid/statistics">
              <el-icon><DataAnalysis /></el-icon>
              <span>工作统计</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      
      <el-container>
        <el-header class="header">
          <div class="header-left">
            <el-breadcrumb>
              <el-breadcrumb-item :to="{ path: '/grid/dashboard' }">工作台</el-breadcrumb-item>
              <el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="header-right">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-icon><User /></el-icon>
                {{ userInfo.gmName || '网格员' }}
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                  <el-dropdown-item command="settings">设置</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <el-main class="main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Odometer, List, Check, DataAnalysis, User } from '@element-plus/icons-vue'

export default {
  name: 'GridLayout',
  components: {
    Odometer,
    List,
    Check,
    DataAnalysis,
    User
  },
  setup() {
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    
    const userInfo = computed(() => store.getters['user/userInfo'])
    const activeMenu = computed(() => route.path)
    
    const currentPageTitle = computed(() => {
      const titleMap = {
        '/grid/dashboard': '工作台',
        '/grid/tasks': '指派任务',
        '/grid/confirm': '确认数据',
        '/grid/statistics': '工作统计'
      }
      return titleMap[route.path] || '工作台'
    })
    
    const handleCommand = (command) => {
      switch (command) {
        case 'profile':
          ElMessage.info('个人资料功能待实现')
          break
        case 'settings':
          ElMessage.info('设置功能待实现')
          break
        case 'logout':
          store.dispatch('user/logout').then(() => {
            router.push('/login')
          })
          break
      }
    }
    
    return {
      userInfo,
      activeMenu,
      currentPageTitle,
      handleCommand
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-layout {
  height: 100vh;
}

.sidebar {
  height: 100vh;
  background: #304156;
  
  .logo {
    padding: 20px;
    text-align: center;
    color: #fff;
    
    h3 {
      margin: 0;
      font-size: 18px;
    }
  }
  
  .el-menu {
    border: none;
    background: transparent;
    
    .el-menu-item {
      color: #bfcbd9;
      
      &:hover {
        background: #263445;
        color: #fff;
      }
      
      &.is-active {
        background: #409eff;
        color: #fff;
      }
    }
  }
}

.header {
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  
  .header-left {
    .el-breadcrumb {
      font-size: 14px;
    }
  }
  
  .header-right {
    .el-dropdown-link {
      cursor: pointer;
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 5px;
      }
    }
  }
}

.main {
  background: #f5f5f5;
  padding: 20px;
}
</style> 